<template>
  <div class="listener">
    <!-- 表格区 -->
    <div class="card">
      <el-table :data="tableData" border>
        <el-table-column prop="protocol" label="协议" align="center">
        </el-table-column>
        <el-table-column prop="listen_on" label="监听地址" align="center">
        </el-table-column>
        <el-table-column prop="max_conns" label="最大连接数" align="center">
        </el-table-column>
        <el-table-column prop="current_conns" label="当前连接数" align="center">
        </el-table-column>
        <el-table-column prop="acceptors" label="连接成功数" align="center">
        </el-table-column>
        <el-table-column
          prop="shutdown_count.bad_username_or_password"
          label="账号错误数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shutdown_count.function_clause"
          label="功能错误数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shutdown_count.ssl_closed"
          label="SSL关闭数"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Listener",
  data() {
    return {
      tableData: [
        // {
        //   protocol: "mqtt:ssl", //协议
        //   listen_on: "8883", //监听地址
        //   max_conns: 102400, //最大连接数
        //   current_conns: 0, //当前连接数
        //   acceptors: 32, //连接成功数
        //   shutdown_count: {
        //     bad_username_or_password: 205, //账号错误数
        //     function_clause: 265, //功能错误数
        //     ssl_closed: 204, //ssl关闭数
        //   },
        // },
      ],
    };
  },
  methods: {
    async init() {
      try {
        let { code, data } = await this.$api.listener.getListeners();
        if (+code === 0) {
          this.tableData = data[0].listeners;
        } else {
          this.$message.error("网络繁忙，请稍后再试");
        }
      } catch (_) {}
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.listener {
  padding: 6px;
  padding-left: 10px;

  .card {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    padding: 15px 20px 20px 20px;
  }
}
</style>